<template>
	<MainPage>
		<template v-slot:HeaderLeft>
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="userListFrom"
				label-width="70px"
			>
				<el-form-item label="调拨时间" prop="createTime">
					<el-date-picker
						v-model="createTime"
						type="daterange"
						class="time220"
						:editable="false"
						unlink-panels
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-dd"
						:clearable="false"
						:picker-options="dateOption"
					/>
				</el-form-item>
				<el-form-item label="商品名称" prop="name">
					<el-input
						v-model.trim="form.name"
						placeholder="名称"
						clearable
						class="wid220"
					></el-input>
				</el-form-item>
				<el-form-item label="单号" prop="name">
					<el-input
						v-model.trim="form.name"
						placeholder="单号"
						clearable
						class="wid220"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="reset marginLeft10" type="primary" @click="reset"
						>重置</el-button
					>
					<el-button
						type="primary"
						@click="getArticleList"
						:loading="listLoading"
						>搜索</el-button
					>
				</el-form-item>
			</el-form>
		</template>
		<template v-slot:HeaderRight>
			<el-button @click="dialogVisible = true"> 新增调拨 </el-button>
		</template>
		<template v-slot:Table>
			<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="list"
				element-loading-text="加载中"
				fit
				border
				highlight-current-row
			>
				<el-table-column
					label="调拨单号"
					prop="nickname"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="调拨类型"
					prop="nickname"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="商品信息"
					prop="nickname"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="备注"
					prop="nickname"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="调拨时间"
					prop="nickname"
					:show-overflow-tooltip="true"
				/>
			</el-table>
		</template>
		<template v-slot:Page>
			<el-pagination
				:current-page="current.page"
				:page-sizes="[20, 30, 50, 100]"
				:page-size="limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount"
				background
				@size-change="changeLimit"
				@current-change="changePage"
			/>
		</template>
		<template v-slot:Dialog>
			<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
				<span>这是一段信息</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false"
						>确 定</el-button
					>
				</span>
			</el-dialog>
		</template>
	</MainPage>
</template>
<script>
	import MainPage from "@/components/MainPage";
	import dateOption from "@/options/dateOption";
	export default {
		components: {
			MainPage,
		},
		data() {
			return {
				dateOption,
				createTime: [],
				form: {
					name: "",
				},
				list: [],
				listLoading: false,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},

				limit: 20,
				totalCount: 1,
				dialogVisible: false,
			
			};
		},
		methods: {
			getArticleList() {
				console.log("搜索");
			},
			reset() {},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
			},
			changePage(page) {
				this.current.page = page;
			},
		},
	};
</script>
<style lang='scss' scoped></style>
